<template>
    <a-page-header
        :ghost="false"
        style="padding: 12px 24px 4px"
        main
        :title="`单位：${reportInfo.name || ''}`">
        <template #extra>
            <a-space>
                <a-button
                    @click="goback"
                    type="primary"
                    >返回</a-button
                >
            </a-space>
        </template>
        <a-row
            style="margin-top: 12px"
            align="middle"
            type="flex">
            <a-col flex="1">
                <a-descriptions
                    :column="4"
                    :labelStyle="{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px', lineHeight: '24px' }">
                    <a-descriptions-item label="统一社会信用代码">{{ reportInfo.creditCode }}</a-descriptions-item>
                    <a-descriptions-item label="行业">{{ reportInfo.industry }}</a-descriptions-item>
                    <a-descriptions-item label="行业代码">{{ reportInfo.industryCode }}</a-descriptions-item>
                    <a-descriptions-item label="年份">{{ reportInfo.year }}</a-descriptions-item>
                    <a-descriptions-item label="负责人">{{ reportInfo.charger }}</a-descriptions-item>
                    <a-descriptions-item label="填报人">{{ reportInfo.informant }}</a-descriptions-item>
                    <a-descriptions-item label="联系电话"
                        ><a>{{ reportInfo.mobile }}</a></a-descriptions-item
                    >
                    <a-descriptions-item label="报出日期">{{ reportInfo.date }}</a-descriptions-item>
                </a-descriptions>
            </a-col>
        </a-row>
    </a-page-header>
    <div class="statement-report flex-col-evenly gap-16 mt-8-3">
        <div class="all-box flex-row gap-16">
            <div
                class="all-item flex-col-evenly"
                v-for="(item, index) in itemInfo"
                :key="item.name">
                <div class="all-item-desc all-title">{{ item.name }}</div>
                <div class="all-item-desc all-value title-h1">
                    {{ item.totalValue }}
                    <span
                        class="all-prop"
                        :style="{
                            color: item.industryCompare?.includes('-') ? token.colorError : token.colorSuccess,
                        }">
                        {{ item.industryCompare }}
                    </span>
                    <!-- -->
                </div>
                <PayCircleFilled
                    v-if="index == 0"
                    class="icon" />
                <SmileFilled
                    v-if="index == 1"
                    class="icon" />
                <GoldFilled
                    v-if="index == 2"
                    class="icon" />

                <BankFilled
                    v-if="index == 3"
                    class="icon" />
            </div>
        </div>

        <div class="report">
            <div class="report-card col-14">
                <div class="report-card-title title-h1">数据对比</div>
                <div class="report-card-body">
                    <a-table
                        :columns="columns"
                        :data-source="reportInfo.compare"
                        bordered
                        :pagination="false"
                        row-key="key">
                        <template #bodyCell="{ column, record }">
                            <template v-if="'areaValue' === column.key">
                                {{ record.areaValue }}
                                <span
                                    class="all-prop"
                                    :style="{
                                        color: record.areaCompare?.includes('-')
                                            ? token.colorError
                                            : token.colorSuccess,
                                    }">
                                    {{ record.areaCompare }}
                                </span>
                            </template>
                            <template v-if="'industryValue' === column.key">
                                {{ record.industryValue }}
                                <span
                                    class="all-prop"
                                    :style="{
                                        color: record.industryCompare?.includes('-')
                                            ? token.colorError
                                            : token.colorSuccess,
                                    }">
                                    {{ record.industryCompare }}
                                </span>
                            </template>
                        </template></a-table
                    >
                </div>
            </div>
            <div class="report-card col-10">
                <div class="report-card-title title-h1">行业/全区对比柱状图(千元)</div>
                <div class="report-card-body">
                    <BarChart
                        v-if="reportInfo.compare"
                        :height="180"
                        :xAxisTitle="reportInfo.compare?.map((i) => i.name)"
                        :series="
                            series1.map((i) => ({ data: reportInfo.compare?.map((c) => c[i.key]), name: i.label }))
                        " />
                </div>
            </div>
        </div>
        <div
            class="report-card"
            v-for="item in itemInfo"
            :key="item.name">
            <div class="report-card-title title-h1">{{ item.name }}</div>
            <div class="report-card-body">
                <div class="all-desc">
                    <p v-html="item.summary"></p>
                    <ul
                        class="alarms"
                        v-if="item.alarms?.length > 0">
                        <p>经分析，发现以下异常问题，请注意核查：</p>
                        <li
                            style="font-size: 15px; font-weight: 500"
                            v-for="alarm in item.alarms"
                            class="alarm"
                            :key="alarm">
                            {{ alarm }}；
                        </li>
                    </ul>
                </div>
                <div class="report">
                    <div class="report-card col-10">
                        <div class="report-card-title title-h2">指标分布</div>
                        <div class="report-card-body">
                            <PieChart
                                :height="160"
                                v-if="item.itemList.filter((it) => !it.sumUp && it.reportValue && it.reportValue > 0)"
                                :data="
                                    item.itemList
                                        ?.filter((it) => !it.sumUp && it.reportValue && it.reportValue > 0)
                                        ?.map((i) => ({ name: i.name, value: i.currentValue }))
                                " />
                        </div>
                    </div>
                    <div class="report-card col-14">
                        <div class="report-card-title title-h2">行业对比</div>
                        <div class="report-card-body">
                            <BarChart
                                v-if="item.itemList"
                                :height="160"
                                :xAxisTitle="
                                    item.itemList
                                        ?.filter((it) => !it.sumUp && it.reportValue && it.reportValue > 0)
                                        ?.map((i) => i.name)
                                "
                                :series="
                                    series2.map((i) => ({
                                        data: item.itemList
                                            ?.filter((it) => !it.sumUp && it.reportValue && it.reportValue > 0)
                                            ?.map((c) => c[i.key]),
                                        name: i.label,
                                    }))
                                " />
                        </div>
                    </div>
                </div>
                <div
                    class="report-card-body"
                    style="padding: 0px; margin-top: 0px">
                    <a-table
                        :columns="columns2"
                        :data-source="item.itemList"
                        bordered
                        :pagination="false"
                        :row-class-name="(record) => (record.sumUp ? 'sum-up' : '')"
                        row-key="key">
                        <template #bodyCell="{ column, record }">
                            <template v-if="['areaValue', 'industryValue'].includes(column.key)">
                                {{ formatValue(record.name, record[column.key]) }}
                                <span
                                    class="all-prop"
                                    :style="{
                                        color: record?.areaCompare?.includes('-')
                                            ? token.colorError
                                            : token.colorSuccess,
                                    }">
                                    {{ record[column.key.replace('Value', 'Compare')] }}
                                </span>
                            </template>
                            <template v-else-if="'diffValue' === column.key">
                                <span :class="`${record.diffValue && record.diffValue != 0 ? 'error' : ''}`">
                                    {{ record.diffValue }}
                                </span>
                            </template>
                            <template v-else-if="'diffRate' === column.key">
                                <span :class="`${record.diffValue && record.diffValue != 0 ? 'error' : ''}`">
                                    {{ record.diffRate }}
                                </span>
                            </template>
                            <template
                                v-if="
                                    (record.name.includes('率') || record.name.includes('工资')) &&
                                    !['name', 'industryValue', 'areaValue'].includes(column.key)
                                ">
                                {{ formatValue(record.name, record[column.key]) }}
                            </template>
                        </template></a-table
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onActivated, onMounted, computed } from 'vue'
import router from '@/router'
import { useThemeToken } from '@/hooks'
import { GoldFilled, PayCircleFilled, SmileFilled, BankFilled } from '@ant-design/icons-vue'
import BarChart from '@/views/components/chart/components/BarChart.vue'
import PieChart from '@/views/components/chart/components/PieChart.vue'
import { useListStore } from '@/store'
import apis from '@/apis'
import { config } from '@/config'
import { useRoute } from 'vue-router'

defineOptions({
    name: 'report',
})

const form = ['depreciation', 'laborCost', 'income', 'tax']
const series1 = [
    { label: '报表数据', key: 'value' },
    { label: '全区水平', key: 'areaValue' },
    { label: '行业水平', key: 'industryValue' },
]
const series2 = [
    // { label: '本年数据', key: 'currentValue' },
    { label: '财务数据', key: 'reportValue' },
    // { label: '数据差异', key: 'diffValue' },
    { label: '行业水平', key: 'industryValue' },
    { label: '全区水平', key: 'areaValue' },
]
const columns = ref([
    {
        title: '指标名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        customRender: ({ text }) => {
            return `${text.replace(/（损失以“—”号记）|（本年贷方累计发生额）|其中：|（本年累计发生额）|\s+/g, '')}`
        },
    },
    { title: '财务数据/千元', key: 'value', dataIndex: 'value', align: 'left' },
    { title: '全区水平/千元', key: 'areaValue', dataIndex: 'areaValue', align: 'left' },
    { title: '行业水平/千元', key: 'industryValue', dataIndex: 'industryValue', align: 'left' },
])

const columns2 = ref([
    {
        title: '指标名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        customRender: ({ text }) => {
            return `${text.replace(/（损失以“—”号记）|（本年贷方累计发生额）|其中：|（本年累计发生额）|\s+/g, '')}`
        },
    },
    { title: '本年数据', key: 'currentValue', dataIndex: 'currentValue', align: 'left' },
    { title: '财务数据', key: 'reportValue', dataIndex: 'reportValue', align: 'left' },
    { title: '数据差异', key: 'diffValue', dataIndex: 'diffValue', align: 'left' },
    { title: '行业水平', key: 'industryValue', dataIndex: 'industryValue', align: 'left' },
    { title: '全区水平', key: 'areaValue', dataIndex: 'areaValue', align: 'left' },
])
const reportKeys = [
    { label: '正常', value: 'diffValue', color: '#19a589', width: '70%', num: '70' },
    { label: '异常', value: 'diff', color: '#f50', width: '20%', num: '20' },
    { label: '待定', value: 'value', color: '#ffca00', width: '10%', num: '10' },
    // { label: '需审核', value: 'realValue', color: '#87d068', width: '40%', num: '100' },
]

const { token } = useThemeToken()
const listStore = useListStore()
const route = useRoute()
const reportInfo = computed(() => listStore.getReportInfo[route.path] || {})
const itemInfo = computed(() =>
    form.map((i) => {
        const report = listStore.getReportInfo[route.path] || {}
        return { ...report[i] }
    })
)
async function getReport(id) {
    const { code, data } = await apis.list.getReport(id)
    if (config('http.code.success') === code) {
        listStore.setReportInfo({ [route.path]: data })
    }
}

const goback = () => {
    router.back()
}
onActivated(() => {
    if (reportInfo.value.id == route.query.id) {
        return
    }
    getReport(route.query.id)
})
onMounted(() => {
    if (reportInfo.value.id == route.query.id) {
        return
    }
    getReport(route.query.id)
})

function formatValue(name, value) {
    if (name.endsWith('率')) {
        return (value * 100).toFixed(2) + '%'
    } else if (name.endsWith('工资')) {
        return (value * 1000).toFixed(0) + '元'
    }
    return value
}
</script>

<style lang="less" scoped>
@marginNormal: 24px;
@paddingNormal: 24px;
@radiusNormal: 8px;
@title1: 16px;
@title2: 16px;
@title3: 16px;
@content: 16px;
@smallContent: 12px;
@errorColor: #f50;
@warnColor: #ffca00;
@infoColor: #19a589;
@smallcolor: #00000045;

.statement-report :deep(.ant-table) {
    .ant-table-cell {
        font-size: 14px !important;
        padding: 6px 8px !important;
    }
    .ant-table-cell:has(.error) {
        background-color: red !important;
    }
    .sum-up {
        .ant-table-cell:not(:has(.error)) {
            background-color: rgba(104, 105, 81, 0.25) !important;
        }
    }
}

:deep(.all-desc) {
    p {
        margin-bottom: 0 !important;
        line-height: 32px;
    }
    .info {
        font-weight: 700;
        color: @infoColor;
    }
    .warn {
        font-weight: 700;
        color: @warnColor;
    }
    .error {
        font-weight: 700;
        color: @errorColor;
    }
    .small {
        font-size: @smallContent;
        color: @smallcolor;
    }
}

.flex-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.gap-16 {
    gap: @marginNormal;
}
.flex-col-evenly {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
}

.title-h1 {
    font-size: @title1;
    font-weight: 800;
}
.title-h2 {
    font-size: @title2;
    font-weight: 800;
}
.text-center {
    text-align: center;
}
.all {
    &-item {
        overflow: hidden;
        position: relative;
        padding: @paddingNormal;
        flex: 1 1 auto;
        border-radius: @radiusNormal;
        background-color: white;
        border: 1px solid #f0f0f0;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        gap: 8px;
        // aspect-ratio: 1.5 / 1;
        &-desc {
            display: flex;
            flex-flow: row nowrap;
            justify-content: start;
        }
        // &-desc:nth-last-child(2) {
        //     margin-top: 12px;
        //     margin-bottom: 6px;
        // }
        .icon {
            color: #00000015;
            position: absolute;
            font-size: 100px;
            bottom: -20px;
            right: -20px;
        }
    }
    &-title {
        font-size: @smallContent;
        font-weight: 700;
        color: @smallcolor;
    }
    &-value {
        font-size: 28px;
        font-weight: 700;
        line-height: 28px;
        & > span {
            padding-left: 3px;
            display: flex;
            flex-flow: column;
            justify-content: end;
            font-size: @smallContent;

            color: @smallcolor;
        }
    }
    &-prop {
        font-weight: 700;
        font-size: @smallContent;
        color: white;
        border-radius: 12px;
        line-height: @smallContent;

        // margin: 0 calc(50% - 50px);
        & > span {
            padding-left: 3px;
        }
    }
}
.report {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: @marginNormal;
    .col-14 {
        width: calc(60% - @marginNormal / 2);
    }
    .col-10 {
        width: calc(40% - @marginNormal / 2);
    }
    &-card {
        flex: 0 0 auto;
        width: 100%;
        background-color: white;
        border-radius: 8px;
        border: 1px solid #f0f0f0;

        &-title {
            border-bottom: 1px solid #f0f0f0;
            padding: 12px;
        }
        &-body {
            padding: @paddingNormal;
            min-height: 100px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-evenly;
            gap: @paddingNormal;
        }
        .divd {
            display: flex;
            clear: both;
            margin: @marginNormal 0;
            width: 100%;
            min-width: 100%;
            color: rgba(0, 0, 0, 0.88);
            border-block-start: 1px solid rgba(5, 5, 5, 0.06);
        }
        .data-report {
            width: 100%;
            height: 6px;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            &-item {
                flex: 0 0 auto;
            }
            &-des {
                font-size: 12px;
                margin-top: @marginNormal;
                height: 16px;
                display: flex;
                line-height: 16px;
                flex-flow: row nowrap;
                gap: @marginNormal;
                // vertical-align: middle;
                justify-content: start;
            }
            &-point {
                box-sizing: border-box;
                margin: 5px;
                width: 6px;
                height: 6px;
                border-radius: 5px;
            }
            &-type {
                display: flex;
                line-height: 16px;
                flex-flow: row nowrap;
            }
        }
    }
}
.alarms {
    margin-top: 12px;
    .alarm {
        color: orangered;
        list-style: disc;
        margin-left: 12px;
    }
}
</style>
